<template>
  <div class="content display-flex jc-around text-center grey-1">
    <router-link :class="{current:'/home' === $route.path}" to="/home" tag="div">
      <i class="iconfont icon-icon_waimai"></i>
      <div class="">外卖</div>
    </router-link>
    <router-link to="/search" tag="div" :class="{current:'/search' === $route.path}">
      <i class="iconfont icon-icon_sousuo"></i>
      <div>搜索</div>
    </router-link>
    <router-link tag="div" to="/order" :class="{current:'/order' === $route.path}">
      <i class="iconfont icon-icon_dingdan"></i>
      <div>订单</div>
    </router-link>
    <router-link tag="div" to="person" :class="{current:'/person' === $route.path}">
      <i class="iconfont icon-icon-gerenzhongxin"></i>
      <div>我的</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'FooterGuide',
}
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/variable";
.content{
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 -1px #e4e4e4;
  .iconfont{
    font-size: 1.692rem;
  }
  .current {
    color: map_get($colors,'primary');
  }
}
</style>
